<template>
  <div style="display: flex; flex-direction: row;">
    <div class="card-left">
      <machine_list :table-data="tableData" :total="total" @handleFather="handleFather" @getList="getList" />
    </div>
    <div style="flex: 1;">
      <div id="map" style="width: 100%; height: 90vh;" />
    </div>
  </div>
</template>
<!-- 
<template>
  <div class="app-container">
    <el-card class="card-box">
      <div style="height: 580px; width: 100%">
        <div class="flexDiv">
          <div class="card-title">当前查询类型</div>
        </div>
        <div class="flexDiv">
          <div class="card-title">所持设备</div>
        </div>

        <div v-show="!showAll" class="card-content" style="display: flex">
          <div class="card-left">
            <machine_list :table-data="tableData" @handleFather="handleFather" @getList="getList" />
          </div>
          <div class="card-right" />
          <div class="card-title">地图</div>
          <div id="map" />
        </div>
      </div></el-card>
  </div>
</template> -->

<script>
import { location } from '../../api/Location'
import machine_list from '@/components/Table/machine_type_list_table.vue'
export default {
  components: {
    machine_list // 在 components 中注册 AboutPage 组件
  },
  data() {
    return {
      lng: '',
      lat: '',
      province: '',
      city: '',
      district: '',
      map: null, // 地图对象
      markers: [], // 标记对象数组
      infoWindow: null, // 信息窗口对象
      infoWindows: [], // 存储消息框
      deflng: 118.087898, // 默认视角聚焦中心
      deflat: 24.623911, // 默认视角聚焦中心
      tableData: [// 范例数据
        { typeId: 1, typeName: '1号机', lng: '118.087898', lat: '24.623911' }
      ],
      listQuery: {
        page: 0,
        limit: 10
      }
    }
  },
  mounted() {
    this.getUserPosition()
  },
  methods: {
    /*
    实际还有bug，如果设备的位置变动就会直接生成一个新的标记，但旧的标记不会消失
    换页估计也没有实现
    */

    initMap() {
      const _that = this
      const geolocation = location.initMap('map') // 初始化地图
      // 初始化地图，这里面包含一个读取当前定位
      AMap.event.addListener(geolocation, 'complete', result => {
        // 这里就是一个监听，在定位完成后返回数据写入
        console.log(result)
        _that.lat = result.position.lat
        _that.lng = result.position.lng
        _that.province = result.addressComponent.province
        _that.city = result.addressComponent.city
        _that.district = result.addressComponent.district
      })
      // 上面初始化地图组件，下面把视角聚焦到目标位置
      if (!this.map) {
        this.map = new window.AMap.Map('map', {
          center: [this.deflng, this.deflat], // 设置地图中心点
          zoom: 18 // 设置地图缩放级别
        })
      }
      for (let i = 0; i < this.tableData.length; i++) {
        // 在这里执行对数组元素的操作
        this.addMarkerToMap(this.tableData[i].typeName, this.tableData[i].lng, this.tableData[i].lat)
      }
    },
    addMarkerToMap(name, lng, lat) {
      // 创建地图对象
      if (!this.map) {
        this.map = new window.AMap.Map('map', {
          center: [lng, lat], // 设置地图中心点
          zoom: 13 // 设置地图缩放级别
        })
      }

      // 创建标记对象
      const marker = new window.AMap.Marker({
        position: [lng, lat], // 设置标记位置
        map: this.map // 设置标记所在地图对象
      })

      // 将标记对象存储在数组中
      this.markers.push(marker)

      // 添加信息窗口
      const infoWindow = new window.AMap.InfoWindow({
        content: '<div>设备:' + name + '<br>经度：' + lng + '<br>纬度：' + lat + '</div>', // 信息窗口内容
        offset: new window.AMap.Pixel(0, -30) // 信息窗口偏移量
      })
      this.infoWindows.push(infoWindow)
      // 点击标记时显示信息窗口
      marker.on('click', () => {
        infoWindow.open(this.map, marker.getPosition())
      })
    },

    getUserPosition() {
      // 仅提供一个后端接口，我前端测试一下连接和函数调用而已，后端获取到经纬度之后直接循环调用 addMarkerToMap(lng, lat)就能写入标记
      // 获取后端返回的经纬度信息
      // 这里仅提供一个示例，实际应用中需要根据后端接口返回的数据进行修改
      // 假设后端返回的数据结构为 {xx,xx, lng: 116.397428, lat: 39.90923 }
      this.axios({
        method: 'get',
        url: 'http://139.9.77.245:8081/device/location/' + this.listQuery.page + '/' + this.listQuery.limit
      }).then(response => { // 使用箭头函数
        const ret = response.data
        if (ret.code === 0) {
          console.log(ret)
          this.total = ret.data.total
          const Data = ret.data.records.map(item => ({
            typeId: item.id,
            typeName: item.name,
            isDelete: 0, // 如果需要，可以根据具体情况设置默认值
            lng: item.lng,
            lat: item.lat
          }))
          this.tableData = Data

          console.log(this.tableData)
          this.initMap()
        } else {
          console.log('定位信息获取失败')
          console.log(ret)
        }
      }).catch(error => {
        console.error('请求出错:', error)
      })
    },
    handleFather(row) {
      console.log(row)
      if (!this.map) {
        this.map = new window.AMap.Map('map', {
          center: [lng, lat], // 设置地图中心点
          zoom: 13 // 设置地图缩放级别
        })
      }

      // 创建标记对象
      const marker = new window.AMap.Marker({
        position: [row.lng, row.lat] // 设置标记位置
        // 这里不指定是画在哪个地图上就不会画出来
      })

      // 添加信息窗口
      const infoWindow = new window.AMap.InfoWindow({
        content: '<div>设备号:' + row.typeName + '<br>经度：' + row.lng + '<br>纬度：' + row.lat + '</div>', // 信息窗口内容
        offset: new window.AMap.Pixel(0, -30) // 信息窗口偏移量
      })
      this.infoWindows.push(infoWindow)
      // 点击标记时显示信息窗口

      infoWindow.open(this.map, marker.getPosition())
    },
    getList(tem) {
      console.log(tem)
      this.listQuery = tem
      this.map = null
      this.getUserPosition()
    }

  }
}
</script>
